<template>
  <div>
    <van-nav-bar
      title="新品首发"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="price">
      <div @click="sort">
        <p :class="current2 == 'red' ? 'sort2' : ''">综合</p>
      </div>
      <div class="top" @click="sortPrice">
        <p :class="`${current == 'default' ? '' : 'on'}`">价格</p>
        <div class="icon-box">
          <van-icon :color="current == 'up' ? 'red' : ''" name="arrow-up" />
          <van-icon :color="current == 'down' ? 'red' : ''" name="arrow-down" />
        </div>
      </div>
      <div @click="sort2">
        <p :class="current2 == 'red1' ? 'sort2' : ''">分类</p>
      </div>
    </div>
    <div class="newgoods">
      <van-grid :column-num="2">
        <van-grid-item v-for="item in list" :key="item.id" icon="photo-o">
          <img class="pic" :src="item.list_pic_url" />
          <p class="pp">
            {{ item.name }}
          </p>
          <p class="prices">￥{{ item.retail_price }}</p>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { newgoods } from "@/api/home/newgoods";
export default {
  data() {
    return {
      list: {},
      id: "",
      order: "",
      current: "default",
      current2: "",
    };
  },
  created() {
    var id = this.$route.params.id;
    this.id = id;
    console.log(this.$route.params.id);
    this.init();
  },
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    init() {
      newgoods({
        isHot: this.id == 2 ? 1 : "",
        isNew: this.id == 1 ? 1 : "",
        order: this.order,
      }).then((res) => {
        console.log(res);
        this.list = res.data;
        console.log(this.list);
      });
    },
    sort() {
      this.current = "default";
      this.current2 = "red";
      this.order = "asc";
      this.init();
    },
    sort2() {
      this.current = "default";
      this.current2 = "red1";
      this.order = "asc";
      this.init();
    },
    sortPrice() {
      if (this.current == "default") {
        this.current = "up";
        this.order = "asc";
      } else if (this.current == "up") {
        this.current = "down";
        this.order = "desc";
      } else {
        this.current = "up";
        this.order = "asc";
      }
      this.init();
    },
  },
  // created() {
  //   var id = this.$route.params.id
  //   this.id = id
  //   console.log(this.$route.params.id)
  //   this.init()
  // }
};
</script>

<style lang="scss" scoped>
.imgs {
width: 100%;
height: 139px;
img {
 width: 100%;
 }
}
.price {
 // margin: 5px 0px;
 display: flex;
  justify-content: space-around;
// line-height: 25px;
.top {
display: flex;
align-items: center;
 justify-content: center;
.icon-box {
 margin-left: 5px;
 display: flex;
 flex-direction: column;
 }
}
.on {
 color: red; 
  }
}
.newgoods { background-color: rgb(248, 246, 246);
 .pic {
 width: 151px; 
 }
  .pp {
     display: block;
 margin-block-start: 1em;
 margin-block-end: 1em;
 margin-inline-start: 0px;
 margin-inline-end: 0px; }
.prices {
 text-align: center;
font-size: 0.4rem;
 color: #b4282d;
 }
}
</style>